<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://struts.apache.org/tags-html-el" prefix="html-el" %>
<%@taglib uri="http://struts.apache.org/tags-bean-el" prefix="bean-el" %>
<%@taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@taglib uri="http://struts.apache.org/tags-logic-el" prefix="logic-el" %>
<%@taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@taglib uri="/WEB-INF/tld/application.tld" prefix="app" %>

<html-el:form action="/cadastroCalendario.do">
	<html-el:hidden property="method" styleId="method"/>
	<table style="width: 100%">
		<tr>
			<td align="center" valign="top">
				<!-- CONTENT -->			
				<div class="content">
					<table class="con">
						<tr>
							<td>
								<table class="breadory">
									<tr>
										<td>Cadastro de Calendário</td>
									</tr>
								</table>
							
								<table style="width:650px;height:400px">
									<tr>
										<td valign="top">
											<table style="width: 100%" class="tbDadosConsulta">
												<tr>
													<th style="width:35px"></th>
													<th style="width:130px">Data</th>
													<th style="width:110px">Dia</th>
													<th style="width:120px">Feriado</th>
													<th>Descrição</th>
												</tr>
											</table>
											<div style="width: 650px; height: 400px; overflow-y:auto">
												<table style="width: 100%" class="tbDadosConsulta">
													<bean:define id="ano" value="0"/>
													<logic-el:iterate id="bean" name="listaResultado" scope="request" indexId="i">
														<tr class="linha${i%2}">
															<td style="text-align: center" style="width:25px">
																<html-el:radio property="idSelecionado" value="${bean.codigo}" onclick="selectItem(this)"/>
															</td>
															<td style="text-align: center;width:110px">${bean.diaSemana}</td>
															<td style="text-align: center;width:100px"><bean:write name="bean" property="data" format="dd/MM/yyyy"/></td>
															<td style="text-align: center;width:110px">${bean.feriado}</td>
															<td style="text-align: left">${bean.descricao}</td> 
														</tr>
														<logic:equal name="bean" property="diaSemana.value" value="1">
															<tr>
																<td colspan="5" align="center" style="background-color:#6894BB;height:2px"></td>
															</tr>
														</logic:equal>
													</logic-el:iterate>	
													<html-el:hidden property="idSelecionado"/>								
												</table>
											</div>
										</td>
									</tr>
									<tr>
										<td class="buttons" align="right" valign="bottom">
											<a href="javascript:alterar()" class="button" id="btnAlterar" style="visibility: hidden;">
												<span>Alterar</span>
											</a>
											<a href="javascript:carregar()" class="button">
												<span>Carregar</span>
											</a>
											<a href="javascript:incluir()" class="button">
												<span>Incluir</span>
											</a>
										</td>
									</tr>
								</table>							
							</td>
						</tr>						
					</table>	
				</div>	
			</td>
		</tr>
	</table>
	</html-el:form>
	<div id="dialogIncluir" data-dojo-type="dijit.Dialog" title="Calendário - Incluir">
		<table class="formulario">
			<tr>
				<td class="label">Data:</td>
				<td class="inputField">
					<input type="text" name="dataIncluir" id="dataIncluir" value="" style="font-size:14px;width:135px" onchange="verificaData(this)" title="Data" constraints="{datePattern:'dd/MM/yyyy', strict:true, min:'2012-04-17'}" data-dojo-type="dijit.form.DateTextBox" data-dojo-props="required:true, invalidMessage:'Data Inválida!'"/>
				</td>
			</tr>
			<tr>
				<td class="label">Feriado:</td>
				<td class="inputField" colspan="5">
					<input type="checkbox" id="feriadoIncluir" title="Feriado" value="1" onclick="habilitaDescricao(this, 'descricaoIncluir')"/> 
				</td>
			</tr>
			<tr>
				<td class="label">Descrição:</td>
				<td class="inputField">
					<input type="text" id="descricaoIncluir" title="Descrição" size="30" maxlength="45" disabled="disabled"/>
				</td>
			</tr>
			<tr>
				<td class="buttons" align="right" valign="bottom" colspan="5">	
					<a href="javascript:incluirCancelar()" class="button">
						<span>Cancelar</span>
					</a>
					<a href="javascript:incluirConfirmar()" class="button">
						<span>Confirmar</span>
					</a>
				</td>
			</tr>
		</table>
	</div>
	<div id="dialogAlterar" data-dojo-type="dijit.Dialog" title="Calendário - Alterar">
		<table class="formulario">
			<tr>
				<td class="label">Data:</td>
				<td class="inputField">
					<input type="text" name="dataAlterar" id="dataAlterar" disabled="disabled" value="" style="font-size:14px;width:135px" onchange="verificaData(this)" title="Data" constraints="{datePattern:'dd/MM/yyyy', strict:true, min:'2012-04-17'}" data-dojo-type="dijit.form.DateTextBox" data-dojo-props="required:true, invalidMessage:'Data Inválida!'"/>
				</td>
			</tr>
			<tr>
				<td class="label">Feriado:</td>
				<td class="inputField" colspan="5">
					<input type="checkbox" id="feriadoAlterar" title="Feriado" value="1" onclick="habilitaDescricao(this, 'descricaoAlterar')"/>
				</td>
			</tr>
			<tr>
				<td class="label">Descrição:</td>
				<td class="inputField">
					<input type="text" id="descricaoAlterar" title="Descrição" size="30" maxlength="45" disabled="disabled"/>
				</td>
			</tr>
			<tr>
				<td class="buttons" align="right" valign="bottom" colspan="2">	
					<a href="javascript:alterarCancelar()" class="button">
						<span>Cancelar</span>
					</a>
					<a href="javascript:alterarConfirmar()" class="button">
						<span>Confirmar</span>
					</a>
				</td>
			</tr>
		</table>
	</div>
<script language="javascript">

	var dataValida = false;

	function selectItem(i) {
		document.getElementById("btnAlterar").style.visibility = "visible";
	}
	function consultar() {
		document.forms[0].method.value = "consultar";
		document.forms[0].submit();
	}
	
	function habilitaDescricao(field, descricao) {
		if(field.checked) {
			document.getElementById(descricao).disabled = false;
		} else {
			document.getElementById(descricao).disabled = true;
			document.getElementById(descricao).value = "";
		}
	}
	
	function verificaData(field) {
		var dataInformada = document.getElementById(field.id).value;
		
		require(["dojo/_base/lang", "dojo/_base/xhr"], function(lang, xhr) {
			xhr.post({
		        url: "cadastroCalendario.do?method=verificaData",
		        timeout: ${ajaxTimeoutVoid},
		        handleAs: "json",
		        content: {
		        	ajax: 'true',
		        	data:dataInformada
		        },
		        load: function(data, ioArgs) {
		        	
		        	var result = data;
		        	if(result[0] == false) {
		        		alert(result[1]);
		        		dataValida = false;
		        		return false;
		        	}
		        	dataValida = true;
		        },
				error: function(data, ioArgs) {
					showAlertMessage("Erro ao realizar está operação! Tente novamente!");
		        }
		    });
		});
	}
	
	function carregar() {
		if(!confirm("Este procedimento irá carregar 1 ano de datas(365 dias) no calendário a partir da última data disponível no Banco de Dados.\nConfirma procedimento?"))
			return;
		
		require(["dojo/_base/lang", "dojo/_base/xhr"], function(lang, xhr) {
			xhr.post({
		        url: "cadastroCalendario.do?method=carregar",
		        timeout: ${ajaxTimeoutData},
		        content: {
		        	ajax: 'true'
		        },
		        load: function(data, ioArgs) {
		        	alert("Calendário carreado com sucesso!");
		        	consultar();
		        },
				error: function(data, ioArgs) {
					showAlertMessage("Erro ao realizar está operação! Tente novamente!");
		        }
		    });
		});
		
	}
	
	function incluir() {
		document.getElementById('dataIncluir').value = "";
		document.getElementById('feriadoIncluir').checked = false;
		document.getElementById('descricaoIncluir').value = "";
		dataValida = false;
		dijit.byId("dialogIncluir").show();
	}
	function incluirConfirmar() {
		
		if(!dataValida) {
			alert("Data Inválida!");
			return;
		}
		
		if(!mandatoryField('dataIncluir')) {
			return;
		}
		var feriado = document.getElementById("feriadoIncluir").checked;
		if(feriado) {
			if(!mandatoryField('descricaoIncluir')) {
				return;
			}
		}
		
		require(["dojo/_base/lang", "dojo/_base/xhr"], function(lang, xhr) {
			xhr.post({
		        url: "cadastroCalendario.do?method=incluir",
		        timeout: ${ajaxTimeoutVoid},
		        content: {
		        	ajax: 'true',
		    		data:document.getElementById('dataIncluir').value,
		    		feriado:feriado == true ? 1 : 0,
		    		descricao:document.getElementById('descricaoIncluir').value
		        },
		        load: function(data, ioArgs) {
		        	alert("Dia incluído com sucesso!");
		        	consultar();
		        },
				error: function(data, ioArgs) {
					showAlertMessage("Erro ao realizar está operação! Tente novamente!");
		        }
		    });
		});
		
		dijit.byId("dialogIncluir").hide();
	}
	
	function incluirCancelar() {
		dijit.byId("dialogIncluir").hide();		
	}
	
	function alterar() {
		if(!mandatoryRadio('idSelecionado', 'Alteração')) {
			return;
		}
		require(["dojo/_base/lang", "dojo/_base/xhr"], function(lang, xhr) {
			xhr.post({
		        url: "cadastroCalendario.do?method=alterarIniciar",
		        timeout: ${ajaxTimeoutReturn},
		        handleAs: "json",
		        content: {
		        	ajax: 'true',
		        	idSelecionado:getSelectedRadio('idSelecionado').value
		        },
		        load: function(data) {
		    		document.getElementById('dataAlterar').value = data[0];
		    		if(data[1] == 0) {
		    			document.getElementById('feriadoAlterar').checked = false;
		    			document.getElementById('descricaoAlterar').value = "";
		    		} else {
		    			document.getElementById('feriadoAlterar').checked = true;
		    			document.getElementById('descricaoAlterar').disabled = false;
		    			document.getElementById('descricaoAlterar').value = data[2];
		    		}
		    		
					dijit.byId("dialogAlterar").show();
		        },
				error: function(data) {
					showAlertMessage("Erro ao realizar está operação! Tente novamente!");
		        }
		    });
		});
	}
	function alterarConfirmar() {
		if(!mandatoryField('dataAlterar')) {
			return;
		}
		var feriado = document.getElementById("feriadoAlterar").checked;
		if(feriado) {
			if(!mandatoryField('descricaoAlterar')) {
				return;
			}
		}
		
		require(["dojo/_base/lang", "dojo/_base/xhr"], function(lang, xhr) {
			xhr.post({
		        url: "cadastroCalendario.do?method=alterar",
		        timeout: ${ajaxTimeoutVoid},
		        content: {
		        	ajax: 'true',
		    		data:document.getElementById('dataAlterar').value,
		    		feriado:feriado == true ? 1 : 0,
		    		descricao:document.getElementById('descricaoAlterar').value,
		        	idSelecionado:getSelectedRadio('idSelecionado').value
		        },
		        load: function(data, ioArgs) {
		        	alert("Dia alterado com sucesso!");
		        	consultar();
		        },
				error: function(data, ioArgs) {
					showAlertMessage("Erro ao realizar está operação! Tente novamente!");
		        }
		    });
		});
		
		dijit.byId("dialogAlterar").hide();
	}
	
	function alterarCancelar() {
		dijit.byId("dialogAlterar").hide();		
	}
	
</script>